<template>
    <h1>数组变化侦听</h1>
    <button v-on:click="clickA">添加数据ui刷新</button>
    <button @click="clickB">添加数据ui不刷新</button>
    <ul>
        <li v-for="(item,index) of arr" :key="index">{{ item }}</li>
    </ul>
    
</template>
<script>

export default {
    data(){
        return{
            arr:['a','b','c']
        }
    },
    methods:{
        clickA(){
            //往数组添加新元素
            this.arr.push('d')
            console.log(this.arr)
        },
        clickB(e){
            //concat:不会修改原arr数组，它会生成一个新的数组
            // this.arr.concat('d')
            //如果想让数组变化刷新ui，在把concat新生成的数组赋值给原arr
            this.arr=this.arr.concat('d')
            console.log(this.arr)
        }
    }
}
</script>
